<template>
  <div class="app">
    <!-- 在页面中显示出 顶部盒子 -->
    <!-- 使用组件 -->
    <p>我是父组件</p>
    <Mylist :arr="arr"></Mylist>

    <LeftNav></LeftNav>

    <!-- <RightContent :vipData="vipData"></RightContent> -->
  </div>
</template>
<script>
//引入组件Top
import TopNav from "./page/TopNav.vue";
import Mylist from "./page/Mylist.vue";
import RightContent from "./page/RightContent.vue";
import LeftNav from "./page/LeftNav.vue";
export default {
  //注册组件
  components: {
    TopNav,
    Mylist,
    RightContent,
    LeftNav,
  },
  data() {
    return {
      list: [],
      arr: [1, 2, 3, 4, 5],
      vipData: [
        {
          name: "2001A",
          list: [
            {
              name:'一组',
              list:["张山", "光束", "王磊", "阿加莎"]
            },
            {
              name:'二组',
              list:["张山22", "光束22", "王磊22", "阿加莎22"]
            },

          ],
        },
        {
          name: "2001B",
          list: [
            {
              name:'一组',
              list:["张山", "光束", "王磊", "阿加莎"]
            },
            {
              name:'二组',
              list:["张山221", "光束221", "王磊221", "阿加莎221"]
            },

          ],
        },
        {
          name: "2001C",
         list: [
            {
              name:'一组',
              list:["张山", "光束", "王磊", "阿加莎"]
            },
            {
              name:'二组',
              list:["张山2244", "光束2244", "王磊2244", "阿加莎2244"]
            },

          ],
        },
      ],
    };
  },
  //mounted 生命周期方法 表示vue挂载完毕了 此时用户看了页面
  mounted() {
    //定义一个方法
    //this: vue的实例化对象
    //bus: 是vue原型上的属性
    //send 是定义的方法名(随便起)
    this.bus.$on("send", (str) => {
      console.log(str);
      //把子组件传递过来的数据 方法
      this.list.push(str);
    });
  },

  methods: {},

  beforeCreate() {
    //创建前
    console.log("创建前");
  },
  created() {
    //这个方法中 vue完成了事件的处理，完成了虚拟DOM的创建
    console.log("创建完毕");
  },
  beforeMount() {
    //挂载前,这个方法处理的数据 完成了 页面和数据的 双向数据绑定
    console.log("挂载前");
  },
  mounted() {
    //挂载完毕 此时用户看到了页面
    //通常会在这个方法中请求数据 还可以在beforeMount  created 中请求数据
    console.log("挂载完毕");
  },

  //组件更新前 这个方法在初始化时并不会执行 只有在组件改变时才执行
  beforeUpdate() {
    console.log("组件更新前");
  },
  updated() {
    //组件更新完毕
    console.log("组件更新完毕");
  },

  beforeDestroy() {
    //组件销毁前
    console.log("即将销毁");
  },
  destroyed() {
    console.log("销毁完毕");
  },
};
</script>

<style lang="scss" scoped>
</style>
